<template>
    <!-- 活动倒计时 -->
      
       <!-- 活动倒计时结束 -->
   <div class="isstore">
      <div v-if="activityLabel &&　countdownon" class="wrapper countdown">
          <span :class="activityLabel"></span>
       
        <div class="lefttime">
            <span>{{activitytext}}</span><em v-html="cdinfo.d"></em> <span>天</span> <em v-html="cdinfo.h"></em> :<span class="colon"></span><em v-html="cdinfo.m"></em> :<span class="colon"></span><em v-html="cdinfo.s"></em>
        </div>
     </div>
      <div class="store-top">
          <div class="store-money">

            <span v-if="priceType=='12' && pricedata.cloudDiamonds" class="shop-yz">
              {{pricedata.cloudDiamonds}}云钻
            </span>
            <del v-if="priceType=='12' && pricedata.cloudDiamonds" class="shop-yz-oldprice">
              &yen;{{pricedata.basePrice}}
            </del>            

            <span v-if="+pricedata.price > 0 && priceType !='12' ">
                <i class="store-symbol" >&yen;</i>
                <span class="store-price">{{pricedata.price}}</span>
                <span class="store-old" v-if="pricedata.basePrice">&yen;{{pricedata.basePrice}}</span>
            </span>

            <span v-if="+pricedata.price <= 0" class="noprice">暂无报价</span>

            <i class="store-hour" v-if="timedata.isBusinessTime &&  alldata.cmmdtyType == '10'">一小时达</i>
            <i class="store-fresh" v-if="timedata.isBusinessTime && alldata.cmmdtyType == '11'">生鲜预订</i>

            <i class="remain" v-if="priceType != '11' && activityLabel && pricedata.activityInfo &&　+pricedata.availableQty > 10">
              限购{{pricedata.activityInfo.limitedPerAmount}}件
            </i><!-- 主要是为云钻兑换的
 -->
          <!--   <i class="remain" v-if="+pricedata.availableQty > 0 && +pricedata.availableQty < 10">
              {{'仅剩'+pricedata.availableQty+'件'}}
            </i> -->

            <i class="remain" v-if="priceType == '11' && pricedata.activityInfo && +pricedata.availableQty > +pricedata.activityInfo.limitedPerAmount && +pricedata.activityInfo.leftCount > +pricedata.activityInfo.limitedPerAmount && +pricedata.activityInfo.leftCount > 10">
               {{'限购'+pricedata.activityInfo.limitedPerAmount+'件'}} 
            </i>
              <!-- leftCount只有这么多商品参加活动 -->

            <i class="remain" v-if="priceType =='11' && pricedata.activityInfo && +pricedata.availableQty > 0 && +pricedata.availableQty < +pricedata.activityInfo.limitedPerAmount && +pricedata.activityInfo.limitedPerAmount < +pricedata.activityInfo.leftCount">
              {{'仅剩'+pricedata.availableQty+'件'}}
            </i><!-- 库存仅剩 -->

            <i class="remain" v-if="priceType =='11' && pricedata.activityInfo && +pricedata.availableQty > 0 && ( +pricedata.activityInfo.limitedPerAmount > +pricedata.activityInfo.leftCount || +pricedata.activityInfo.leftCount < 10)">
              {{'仅剩'+pricedata.activityInfo.leftCount+'件'}}
            </i><!-- 活动商品数量仅剩 -->

          </div>
          <h1 class="store-title" v-if="alldata.cmmdtyName">{{alldata.cmmdtyName}}</h1>
          <p class="store-characteristic" v-if="alldata.basicSalePoint">{{alldata.basicSalePoint}}</p> 
      </div>
       
       <div class="store-content">
          <!-- <div class="store-content-box store-discount" @click="DiscountShowFn" v-if="Lqvolume.length > 0">
              <span class="store-content-title">优惠</span>
              <div class="store-cx-box">
                  <p>
                    <span class="store-mj">满减</span>
                    <span class="store-mj-info">{{Lqvolume.join(',')}}</span>
                  </p>
              </div>
              <i class="store-shape"></i> 
          </div> -->

          <!-- <div class="store-content-box store-collar" @click="volumeShowFn" v-if="volumeInfo.length > 0">
              <span class="store-content-title">领券</span>
              
              <span class="store-volume" v-for="(item, index) in Lqvolume" :key="item.id">{{item}}</span>

              <i class="store-shape"></i> 
          </div> -->
          <img v-if="bottomlabelPath" :src="bottomlabelPath" alt="">
          <div class="store-content-box store-tip"><p class="store-memo">{{timedata.isBusinessTime?pricedata.postAge : '非营业时间内，可预约送货~'}}</p></div>  
          <div class="store-content-box store-serve" v-if="alldata.cmmdtyType == '10' && Object.keys(timedata).length > 0">
            <span class="store-content-title">服务</span> 
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{timedata.isBusinessTime? '一小时达': '预约送达'}}</span>
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{freightFare}}</span>
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{timedata.businessStartTime}}-{{timedata.businessEndTime}}可配送</span>
          </div>

          <div class="store-content-box store-serve" v-if="alldata.cmmdtyType == '11' && Object.keys(timedata).length > 0 ">
            <span class="store-content-title">服务</span> 
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{timedata.isBusinessTime? '次日送达': '预约送达'}}</span>
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{freightFare}}</span>
            <i class="store-serve-sure"></i>
            <span class="store-serve-info">{{timedata.businessStartTime}}-{{timedata.businessEndTime}}可配送</span>
          </div>

          

          <div class="store-content-box store-specifications">
            <span class="store-content-title">规格</span> 
            <span class="store-speci">{{alldata.cmmdtyStandard+'/'+alldata.cmmdtyUnit}}</span>
          </div>

          <div class="store-content-box store-tip" v-if="alldata.cmmdtyTips">
            <p class="store-memo" >{{alldata.cmmdtyTips}}</p>
          </div>
       </div>
        
        <!-- <div class="mask_volumeInfo" :class="{'volumeok': volumeok}">
            <volume :data="volumeInfo" v-if="volumeInfo.length > 0" v-on:volumecloseFn="volumecloseFn"></volume>
        </div>

        <div class="mask_dicountInfo"  :class="{'discountok': discountok}">
            <discount :discountInfo="Lqvolume" v-if="Lqvolume.length > 0" v-on:discountcloseFn="discountcloseFn"></discount>
        </div> -->
   </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
// import Vue from 'vue'
// import Volume from './volume'
// import Discount from './discount'
import {  getstorePrice, getDatailTime, getDataillivery2, getvolume, getpcss } from '@/service/getData'
export default {
      props:['alldata'],
      data() {
        return {
            pricedata: {},
            freightFare:'',//运费
            timedata: {},
            activityLabel:'',
            priceType: '',
            countdownon: true,
            activitytext:'距结束',
            cdinfo:{d:0, h:0, m:0, s:0},
            volumeInfo:[],
            volumeok: false,
            discountok: false,
            bottomlabelPath: '',

            Lqvolume: [],
        }
      },
      components: {
        // Volume,
        // Discount
      },
      created() {
          //爆炸贴
          // 这是爆炸贴注释的代码,731不做 开始
          // getpcss({
          //   params: JSON.stringify([
          //           {cmmdtyCode:this.$route.params.cmmdtyCode,supplierCode:this.$route.params.supplierCode,channel:'WAP',labelScene:'03'},
          //           {cmmdtyCode:this.$route.params.cmmdtyCode,supplierCode:this.$route.params.supplierCode,channel:'WAP',labelScene:'04'},
          //           {cmmdtyCode:this.$route.params.cmmdtyCode,supplierCode:this.$route.params.supplierCode,channel:'WAP',labelScene:'06'}
          //           ])
          // })
          // .then((rep) => {
          //     if(rep.length) {
          //         for(var i = 0; i < rep.length; i++) {
          //             if((rep[i].labelScene == '03' || rep[i].labelScene == '04') && rep[i].labelList && rep[i].labelList.length && rep[i].labelList[0].labelPath) {
          //                 this.bottomlabelPath = rep[i].labelList[0].labelPath
          //             }
          //             //这是轮播图的爆炸贴
          //             var PathClass,toplabelPath;
          //             if(rep[i].labelScene == '06' && rep[i].labelList && rep[i].labelList[0]) {
          //                 if(rep[i].labelPlace == '1') {
          //                   PathClass = 'lefttop'
          //                 }
          //                 if(rep[i].labelPlace == '2') {
          //                   PathClass = 'righttop'
          //                 }
          //                 if(rep[i].labelPlace == '3') {
          //                   PathClass = 'leftbottom'
          //                 }
          //                 if(rep[i].labelPlace == '4') {
          //                   PathClass = 'rightbottom'
          //                 }
          //                 toplabelPath = rep[i].labelList[0].labelPath
                          
          //                 //提交到shop.vue给轮播用
          //                 this.$emit('pacc', {
          //                   PathClass: PathClass,
          //                   toplabelPath: toplabelPath
          //                 }) 
          //             }
                     
          //         }
          //     }
          // })
 // 这是爆炸贴注释的代码,731不做 结束
          // alldata: function(val, old) {
            getstorePrice({
              'cmmdtyCode': this.$route.params.cmmdtyCode,
              'storeLocation': this.position.storeLocation,
              'cityCode': this.position.cityCode,
              'supplierCode': this.$route.params.supplierCode
            })
            .then((json) => {
                if (!json || !json.resultData) {
                    return;
                }
                
                let data1 =  json.resultData;

                this.addCartFn(parseInt(data1[0].availableQty), data1[0].activityInfo, data1[0].saleType, data1[0].price, data1[0].priceType);

                var priceType = data1[0].priceType;
                this.priceType = priceType;
                     // 显示活动标签
                switch(priceType) {
                    case '21': this.activityLabel = 'label label-djh'; break;
                    case '22': this.activityLabel = 'label label-qg'; break;
                    case '11': this.activityLabel = 'label label-xsqg'; break;
                    case '12': this.activityLabel = 'label label-yzhg'; break;
                }
                 
                 var  price = data1[0].price
                 
                  if(priceType != '12' && +data1[0].basePrice <= +price) {

                     data1[0].basePrice = ""

                  }
                    
                 

                var activityInfo = data1[0].activityInfo //活动信息

                 if(activityInfo){
                  
                  if(priceType != '22' && priceType != '21') {         
                    this.countdown(data1[0].activityInfo.currTime, data1[0].activityInfo.endTime, this, priceType)
                  }

                  if(priceType=='12' && data1[0].cloudDiamonds > 0){
                     this.$store.dispatch('yztype',{
                          yztype: 'yzactive'
                        });
                  }

                    //限时抢购
                    if(priceType == 11 &&　data1[0].activityInfo.limitedPerAmount > 0) {
                        this.$store.dispatch('xsqgnum',{
                            xsqgnum: data1[0].activityInfo.limitedPerAmount
                        });
                    }else {
                      this.$store.dispatch('xsqgnum',{
                            xsqgnum: 0
                      });
                    }
                    　
                 }else {
                      this.$store.dispatch('xsqgnum',{
                            xsqgnum: 0
                        });
                    }

                 this.$store.dispatch('availableQty',{
                    availableQty: parseInt(data1[0].availableQty)
                 })
                 
                this.pricedata = data1[0]
                      
                
                 
                this.getDataillivery(this.alldata.cmmdtyType, price)

                this.buseFn();

                this.volumeFn(price, priceType);

            })
          // }
         
      },
      computed: {
        ...mapGetters({
          area: 'area',
          shoptype: 'gettype',
          position: 'position',
          yztype:'getyztype'
        })
    },

    methods: {
        // discountcloseFn(){
        //   this.discountok = false;
        //   $('.protool').show();
        // },
        // volumecloseFn(){
        //    this.volumeok = false;
        //    $('.protool').show();
        // },
        // volumeShowFn() {
        //   this.volumeok = true;
        //   $('.protool').hide();
        // },
        // DiscountShowFn() {
        //   this.discountok = true;
        //   $('.protool').hide();
        // },
        volumeFn(price, priceType){
            getvolume({
              'cmmdtyCode': this.$route.params.cmmdtyCode,
              'bizCode': this.$route.params.supplierCode, 
              'cityCode': this.position.cityCode,
              'area': this.area.lesCityCode || '025',
              'snPrice': price,
              'type': priceType,
              'num': '1',
              'chan': '44',
              'bonusId': '3:60'
            })
            .then((rep) => {
              if(!rep || !rep[0] || !rep[0].promotions) return;

              var pro = rep[0].promotions;

              if(pro.length > 0){
                  var discount = pro

                 for(let i=0; i < discount.length; i++ ) {
                    let d = discount[i];

                    if(d.activityType == '7') {
                      this.volumeInfo.push(d) //券的内容对象
                      this.Lqvolume.push(d.activityDesc)//券的内容
                    }   

                } 
              }

               

            }) 
        },
        getDataillivery(cmmdtyType,price){
           getDataillivery2({
              'cmmdtyCode': this.$route.params.cmmdtyCode,
              "storeCode": this.position.storeLocation, 
              "cmmdtyType": cmmdtyType,
              "price": price,
              'rand':{
                _: Math.random()+10000000
                }
          })
          .then((json) => {
              if (!json || !json.resultData) {
                return;
              }
              // this.priceinfo[0].postAge = 

              this.$set(this.pricedata, 'postAge', json.resultData.postAge)
              var test1 = '';
               if( json.resultData.freightFare == 0){
                  test1 = '免运费'
               }else {
                  test1 = "满"+json.resultData.snslt+"免运费"
               }
               this.freightFare = test1;
              
           })
      },
      buseFn() {
        getDatailTime({
                  version:'2.0',
                  storeLocation: this.position.storeLocation,
                  _: Math.random()+10000000
              })
              .then((json) => {
                  let data1 = json.data;
                  if(!data1) return;
 

                  this.timedata = data1;
              })
      },
      addCartFn(availableQty, activityInfo, saleType,  price, priceType){
             
            console.log('库存'+availableQty, '是否活动'+!!activityInfo);
            if(+price <= 0   || priceType == 0) {
              this.$store.dispatch('on', false);
              console.log("价格不能为"+price)
              return;
            }

             

            if(availableQty == 0 || availableQty == '') {
              this.$store.dispatch('on', false);
              console.log('不好意思,没有库存了');
              return;
            }
            if( saleType != 0 ){
              this.$store.dispatch('on', false);//可以加入购物车就背景变灰
              console.log("无法加人购物车");
              return;
            }

            //这时候可以加入购物车
            this.$store.dispatch('on', true);//可以加入购物车就背景就有
      },
       countdown(currTime, endTime, that, priceType, load) {
            var that = this,
                // data = activityInfo,
                diff = new Date().getTime() - currTime,
                time,
                off = false;

            if (!currTime || !endTime) {
                return;
            }

            function cd() {

                var remain = parseInt((endTime - new Date().getTime() - diff) / 1000);
                if(load == 'load' && remain == 0 && !off){
                      off = true  
                      clearTimeout(time)
                      console.log(3+'我是728行的')
                      setTimeout(()=> {
                        that.centeryr();
                      },1500) 
                }
                if(load == 'jmq' && remain == 0 && !off){
                      clearTimeout(time)
                      off = true  
                      console.log(4+'我是676行的')
                      setTimeout(()=> {
                        that.centeryr();
                      },1500) 
                }
                if (remain >= 0 && !off) {
                    var theTime = remain;
                    var theTime1 = 0;// 分
                    var theTime2 = 0;// 小时
                    var theTime3 = 0;// 天

                    theTime3 = parseInt(remain/3600/24);
                    
                    if(priceType == 11){
                      if(theTime3 >= 3){
                        that.countdownon = false
                      }else{
                        that.countdownon = true
                      }
                    }
                    

                    theTime2 = parseInt(remain/3600%24);
                    theTime1 = parseInt(remain/60%60);
                    theTime = parseInt(remain%60); 

                    // if(theTime1 == 0 && theTime2 && theTime3)
                    

                    theTime = theTime<10 ? '0'+theTime : theTime.toString();
                    theTime1 = theTime1<10 ? '0'+theTime1 : theTime1.toString();
                    theTime2 = theTime2<10 ? '0'+theTime2 : theTime2.toString();
                    theTime3 = theTime3<10 ? '0'+theTime3 : theTime3.toString();

                    // if (theTime3 >= 3 && detail.vm.cmmdtyType != 20) {
                    //    that.showActivity = false;
                    // } //这句话加了会报错

                    var html = '';
                    theTime.split('').forEach(function(item) {
                        html += '<i>' + item + '</i>';
                    });
                    that.cdinfo.s = html;

                    html = '';
                    theTime1.split('').forEach(function(item) {
                        html += '<i>' + item + '</i>';
                    });
                    that.cdinfo.m = html;

                    html = '';
                    theTime2.split('').forEach(function(item) {
                        html += '<i>' + item + '</i>';
                    });
                    that.cdinfo.h = html;

                    html = '';
                    var d = theTime3.split('');
                    if (d.length > 2) {
                        html = '<i>...</i>' + '<i>' + d[d.length-1] + '</i>'
                    }
                    else {
                        d.forEach(function(item) {
                            html += '<i>' + item + '</i>';
                        });
                    }

                    that.cdinfo.d = html;
                     
                    time = setTimeout(cd, 1000);
                     
                }else{
                  
                  if(load != 'load') {
                    that.countdownon = false
                  }
                  
                }
            }
            cd();
        }
    }
}
</script>
 
<style lang="scss" scoped>
   @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
   .isstore {
    background-color: #f7f7f7; 
   }
   .mask_volumeInfo,.mask_dicountInfo {
      position: fixed;
      bottom: 0;
      top:100%;
      width:100%;
      overflow: hidden;
      background-color: #fff;
      transition: top 0.5s;
      background-color: #f8f8f8;
      z-index:11;
      &.volumeok, &.discountok {
        top:30% !important;
      }
   }

    
    .store-top {
      padding: _(16) _(24);
      background-color: #fff;

          .store-money {
              height: _(62);
              // line-height: _(62);
              padding-bottom: _(20);
              
              
                  .store-symbol {
                      font-size: _(30);
                      color: #ff782d;
                      font-weight: bold;
                      position: relative;
                      top: _(1);
                  }

                  .store-price {
                    font-size: _(44);
                    color: #ff782d;
                    font-weight: bold;
                    position: relative;
                    top: _(1);
                  }

                  .store-old {
                    font-size: _(30);
                    color: #aaa;
                    margin-left: _(13);
                    position: relative;
                    top: _(-1);

                    &:after {
                      content: '';
                      width: 100%;
                      height: 1px;
                      background-color: #aaa;
                      position: absolute;
                      left: 0;
                      top: 50%;
                      transform:rotate(-15deg);
                    }
                  }

                  .store-hour {
                      position: relative;
                      top: _(-7);
                      height: _(28);
                      line-height: _(28);
                      padding: 0 _(10) 0 _(29);
                      border-radius: _(28);
                      background-color: #ff782d;
                      color: #fff;
                      &:after {
                          content: "";
                          position: absolute;
                          left: _(4);
                          bottom: 0;
                          width: _(29);
                          height: _(40);
                          background-size: 100%;
                          background-image: url('/static/images/store/Path@1x.png');
                      }
                  }

                  .remain {
                    float: right;
                    font-size: _(20);
                    color: #ff782d;
                    margin-right: _(10);
                    margin-top: _(10);
                  }

                  .store-fresh {
                    position: relative;
                    top: _(-7);
                    height: _(28);
                    line-height: _(28);
                    padding: 0 _(10);
                    font-size: _(20);
                    color:#fff;
                    border-radius: _(100);
                    background-color: #84ce3b;
                  }
          }

          .store-title {
            line-height: _(42);
            font-size: _(30);
            color: #444;
            font-weight: bold;
          }

          .store-characteristic {
            margin-top: _(12);
            height: _(33);
            line-height: _(33);
            font-size: _(24);
            color:  #999;
            letter-spacing: _(0.39);
          }
    }

    .store-content {
        margin-top: _(16);
        padding: 0 0 0 _(24);
        background-color: #fff;

        .store-content-box {
            position: relative;
            box-shadow:0 1px 0 0 #e5e5e5;
            // height: _(88);
            line-height: _(88);
            .store-shape {
                position: absolute;
                width: _(15);
                height: _(25);
                top: 50%;
                margin-top: _(-12.5);
                right: _(23);
                background-size: 100%;
                background-image: url('/static/images/store/Shape@1x.png');
            }

            .store-content-title {
              font-size: _(24);
              color: #999;
            }

            &:last-child {
              box-shadow:0 0 0 0 #fff;
            }
        }

    }
    .store-tip .store-memo{
        color: #999;
    }
 
    .store-discount .store-cx-box {
            max-width: _(584);
            margin-left: _(20);
            display: inline-block;
            vertical-align: middle;
            font-size: 0;
  
              p {
                white-space:nowrap; 
                overflow:hidden; 
                text-overflow:ellipsis;
                line-height: _(50);

                  span {
                        vertical-align: middle;
                  }
              }

              .store-mj {
                padding: _(2) _(10);
                border-radius: _(100);
                background-color: #fff;
                border: _(1) solid #ff782d;
                border-radius: _(100);
                font-size: _(20);
                line-height: _(20);
                color: #ff782d;
              }

              .store-mj-info {
                font-size: _(24);
                color: #444;
                margin-left: _(10);
              }
          }

          .store-collar {
              
              .store-volume {
                margin-left: _(20);
                padding: _(4) _(10);
                background-size: 100% 100%;
                background-image: url('/static/images/store/mj.png');
                font-size: _(22);
                color: #fff;
              }
          }

          .store-serve {
             .store-serve-sure {
              display: inline-block;
              width: _(26);
              height: _(26);
              margin: _(-4) _(5) 0 _(21);
              background-size: 100% 100%;
              vertical-align: middle;
              background-image: url('/static/images/store/hour-sure.png');
             }
          }

          .store-specifications {
            .store-speci {
              margin-left: _(20);
              font-size: _(24);
              color: #444;
            }
          }




 
.store-money {
  .noprice {
      font-size: .6rem;
      color: #BBB;
  }

    del.shop-yz-oldprice {
      color: #999;
      font-size: 0.4rem;
    }

    .shop-yz {
      color: #ff782d;
      font-size: 0.7rem;
      margin-right: 2%;
    }
}
 

</style>
